<!--详情页的反馈详情-->
<template>
  <div class="detail-tab-rit">
    <!-- 没有反馈数据时候显示start -->
    <div class="null-feedback" v-if="fdLength <= 0">
      <p>暂无反馈</p>
      <div class="btn" @click="goLink()">去反馈</div>
    </div>
    <!-- 没有反馈数据时候显示end -->
    <template v-if="fdLength > 0">
    <div class="detail-fedbck" v-for="item in Feedback">
      <div class="df-head cf">
        <span class="pic f-l">
          <img src="~images/icon/people-ico.png">
        </span>
        <span class="f-l">{{item.FeedbackName}}</span>
        <span class="time f-l">{{item.FeedbackTime | timeshort}}</span>
      </div>
      <div class="df-body">
        <p>{{item.Memo}}</p>
        <ul class="pic cf" v-if="item.FeedbackPicture !== 'null'">
          <li v-for="item in item.FeedbackPicture"  @click="checkImg(item)"><img :src="item | simpleImgUrl"/></li>
        </ul>

        <div class="voice-mail cf" v-if="item.FeedbackVoice && item.FeedbackVoice.length>0" id="voiceBox">
          <div class="f-l mr10">语音留言:</div>
          <div class="vm-ctx f-l" 
               v-for="itemvo in item.FeedbackVoice"
               @click="playVoice(itemvo.voice)">
            <span class="txt">点击播放</span>
            <span class="second" v-if="itemvo.seconds">{{itemvo.seconds}}'</span>
          </div>
        </div>
      </div>
      <div class="df-foot-wrap">
        <div class="df-foot" @click="goLink(item)">
          <i class="iconfont icon-msg"></i>
          <em>回复</em>
        </div>
      </div>
      <prev-img :checkimgs ="checkimg" v-on:clearData="checkimg = ''"></prev-img>
    </div>
    </template>
  </div>
</template>

<script>
import prevImg from '@/components/share/previewPic/preview.vue'
export default {
  props: ['guid','billno'],
  components: {
    prevImg
  },
  data() {
    return {
      Feedback:[],
      fdLength:'',
      checkimg:'',
      playVoiceId:'',
      timer:'',

      //APP新增参数
      isApp: false,
      audioPlayer: null,
      isPlaying: false,
      playingObject: null,
    }
  },
  created() {
    this.plusInit();
    this.getFeedback();
  },
  beforeDestroy(){
    this.leave();
  },
  methods: {
    plusInit(){
      if (navigator.userAgent.toLowerCase().match(/MicroMessenger/i) != "micromessenger") {
        this.isApp = true;
      }
      if(this.isApp){
        if (window.plus) {
            plusReady();
        } else {
            document.addEventListener('plusready', plusReady, false);
        }
        function plusReady() {
            console.log('plus已经启动并加载...')
        }
      }
    },
    leave(){
      var self = this;
      if(this.playVoiceId){
        this.jWeixin.stopVoice({
          localId: self.playVoiceId // ID，由stopRecord接口获得
        });
      };
    },
    //获取反馈详情
    getFeedback() {
      var self = this;
      var query = {
        Guid: this.guid,
      };
      this.Ajax.post('SearchTRMedPoFeedbacies', query).then(function(resp) {
        if (resp.IsSuccess) {
          self.Feedback = resp.Datas;
          self.fdLength=resp.TotalRecords;
          self.Feedback.forEach(function(element,index) {
            if(element.FeedbackPicture){
              self.Feedback[index].FeedbackPicture = JSON.parse(element.FeedbackPicture);
            };
            if(element.FeedbackVoice){
              self.Feedback[index].FeedbackVoice =JSON.parse(element.FeedbackVoice);
            };
          }, this);
        };
      });
    },
    goLink(item){
      // if(item){
      //   sessionStorage.Feedback = JSON.stringify(item);
      // };
      this.$router.push({
        path: '/feedback',
        query:{
          id:this.guid,
          billno:this.billno
        }
      })
    },
    //------------------------------------------------------------语音------------------------------------------------------------
    playVoice(id) { 
      var self = this;
      if(self.isApp){
        self.app_playVoice(id, self);
      } else {
        self.wx_playVoice(id, self);
      }
    },

    leave(){
      var self = this;
      if(self.isApp){
        self.app_leaveFunction(self);
      } else {
        self.wx_leaveFunction(self);
      }
    },

    //===============================================微信语音===============================================
    //微信播放语音接口

    wx_playVoice: function(id) {
      this.jWeixin.stopRecord();
      var target = $(event.target).parent();
      if(target.hasClass('cur')){
        $("#voiceBox .vm-ctx").removeClass('cur');
      }else{
        var _this = this;
        clearTimeout(_this.timer);
        this.timer = setTimeout(function() {
            $("#voiceBox .vm-ctx").removeClass('cur');
            target.addClass('cur');
            _this.playVoiceId = id;
            _this.jWeixin.playVoice({
              localId: id // 需要播放的音频的本地ID，由stopRecord接口获得
            });
            //监听语音播放完毕接口
            _this.jWeixin.onVoicePlayEnd({
              success: function (res) {
                target.removeClass('cur');
              }
            });
        }, 300);
      };
    },

    //微信离开页面时的操作
    wx_leaveFunction: function(){
      var self = this;
      if(this.playVoiceId){
        this.jWeixin.stopVoice({
          localId: self.playVoiceId // ID，由stopRecord接口获得
        });
      };
    },
    //===============================================微信语音===============================================


    //===============================================APP语音===============================================
    //APP播放录音
    app_playVoice: function(id, self){
      var target = $(event.target).parent();
      if(id.indexOf('wxLocalResource') > -1){
        plus.nativeUI.toast('此语音为微信端发布，请登录微信试听');
      } else {
        if(id.indexOf('/File/Index/') > -1){
          var id = 'https://image.csyaoly.com' + id;
        }
        if(self.playingObject == id){ //相同文件点击切换播放/停止
          $("#voiceBox .vm-ctx").removeClass('cur');
          self.audioPlayer.stop();
          self.audioPlayer = null;
          self.playingObject = null;
          self.isPlaying = false;
        } else {
          GoPlay(self, target);
        }
      }
      
      //播放
      function GoPlay(self, target){
        if(self.isPlaying == false) {
          self.audioPlayer = plus.audio.createPlayer(id);
          self.isPlaying = true; //正在播放
          self.playingObject = id; //正在播放的对象
          $("#voiceBox .vm-ctx").removeClass('cur');
          target.addClass('cur');
          self.audioPlayer.play(
            function() {
              $("#voiceBox .vm-ctx").removeClass('cur');
              self.playingObject = null; //正在播放的对象
              self.audioPlayer = null; //清空
              self.isPlaying = false; //播放完成事件
            },
            function(e) {
              plus.nativeUI.toast("播放器错误:" + e.message);
            }
          );
        } else {
          $("#voiceBox .vm-ctx").removeClass('cur');
          self.audioPlayer.stop(); //停止
          self.isPlaying = false; //正在播放
          self.playingObject = null;
          self.audioPlayer = null; //清空
          self.audioPlayer = plus.audio.createPlayer(id); //重新注册播放
          self.isPlaying = true;
          self.playingObject = id;
          $("#voiceBox .vm-ctx").removeClass('cur');
          target.addClass('cur');
          self.audioPlayer.play(
            function() {
              $("#voiceBox .vm-ctx").removeClass('cur');
              self.playingObject = null; //正在播放的对象
              self.audioPlayer = null; //清空
              self.isPlaying = false; //播放完成
            },
            function(e) {
              plus.nativeUI.toast("播放器错误:" + e.message);
            }
          );
        }
      }
    },

    //APP离开页面时的操作，停止+清除（播放器+录音器）
    app_leaveFunction:  function(self){
      if(self.audioPlayer){
        self.audioPlayer.stop();
        self.audioPlayer = null;
      }
    },
    //===============================================APP语音===============================================
    //------------------------------------------------------------语音------------------------------------------------------------

    checkImg(value){
      this.checkimg = value;
    }
  }
}
</script>